<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="top_header_left">
        <el-select v-model="atlas.cid" placeholder="礼物类型" clearable class="filter-item" filterable
          style="width: 200px;max-width:70%;margin-right: 20px">
          <el-option v-for="item in classType" :key="item.id" :label="item.cat_name" :value="item.id" />
        </el-select>

        <el-input v-model="atlas.name" placeholder="礼物名称" style="width:200px;margin-right: 20px" />

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="atlas.page = 1;handleFilter()">
          搜索
        </el-button>
      </div>
      <div class="top_header_right">
        <el-button class="filter-item" type="primary" style="margin-left: 20px" @click="dialogFormVisible1 = true;">
          新增
        </el-button>
      </div>
    </div>

    <el-table ref="multipleTable" :data="list" stripe style="width: 1200px" border>
      <el-table-column prop="id" label="id" width="80" align="center" :show-overflow-tooltip='true' />
      <el-table-column prop="pic_full" label="名称" width="200" align="center">
        <template align="center" slot-scope="scope">
          <div class="demo-image__preview">
            <el-image class="my-img" :src="scope.row.icon_full" ref="myImg" :preview-src-list="srcList"
              @click="handlePriveImg(scope.row.icon_full)" @click.stop="handleClickItem">
            </el-image>
            <span>{{scope.row.name}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="cat_name" label="礼物类型" align="center" :show-overflow-tooltip='true' />
      <el-table-column prop="money" label="价值" align="center" :show-overflow-tooltip='true' />
      <el-table-column prop="tag_name" label="礼物标签" align="center">
        <template align="center" slot-scope="scope">
          <el-button size="small" type="primary" v-if="scope.row.tag_name">
            <span>{{scope.row.tag_name}}</span>
          </el-button>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort_order" label="排序" align="center" />
      <el-table-column prop="is_show" label="是否显示" align="center">
        <template align="center" slot-scope="scope">
          <span v-if="scope.row.is_show == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template align="center" slot-scope="scope">
          <el-button type="button" size="small" @click="gift_edit = {...scope.row};dialogFormVisible1 = true;">
            编辑
          </el-button>
          <el-button type="button" size="small" @click="setUp(scope.row)" v-if="scope.row.sub_gift == 1">
            设置子礼物
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="atlas.page" :limit.sync="atlas.pageSize"
      @pagination="handleFilter" />


    <el-dialog :title="gift_edit.id?'编辑':'新增'" :visible.sync="dialogFormVisible1" style="width:800px;margin:0 auto;"
      class="model_">
      <div class="center_lisr">

        <div>
          <span>礼物名称</span>
          <el-input v-model="gift_edit.name" placeholder="礼物名称" style="width:300px;max-width:70%;" />
        </div>

        <div class="image_icon">
          <span>礼物图标</span>
          <div style="width:300px;max-width:70%;">
            <div class="image_new_100">
              <img :src="gift_edit.icon_full" alt="">
              <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
                :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
                :http-request="uploadFile1" ref="upload1" :on-change="onchange">
                <el-button size="small" type="primary">{{gift_edit.icon_full?'点击替换':'点击上传'}}</el-button>
              </el-upload>
            </div>
          </div>
        </div>

        <div class="image_icon">
          <span>礼物大图</span>
          <div style="width:300px;max-width:70%;">
            <div class="image_new_100">
              <img :src="gift_edit.image_gray_full" alt="">
              <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
                :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
                :http-request="uploadFile2" ref="upload2" :on-change="onchange">
                <el-button size="small" type="primary">{{gift_edit.image_gray_full?'点击替换':'点击上传'}}</el-button>
              </el-upload>
            </div>
          </div>
        </div>

        <div class="image_icon">
          <span>动效文件</span>
          <div style="width:300px;max-width:70%;">
            <div class="image_new_100">
              <div class="span_nth">{{gift_edit.image_file}}</div>
              <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/admin/imgUpload"
                :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
                :http-request="uploadFile3" ref="upload3" :on-change="onchange">
                <el-button size="small" type="primary">{{gift_edit.image_file?'点击替换':'点击上传'}}</el-button>
              </el-upload>
            </div>
          </div>
        </div>

        <div class="image_icon">
          <span>全服特效</span>
          <div style="width:300px;max-width:70%;">
            <div class="image_new_100">
              <div class="span_nth">{{gift_edit.pag_url}}</div>
              <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
                :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList"
                :http-request="uploadFile4" ref="upload4" :on-change="onchange">
                <el-button size="small" type="primary">{{gift_edit.pag_url?'点击替换':'点击上传'}}</el-button>
              </el-upload>
            </div>
          </div>
        </div>

        <div>
          <span>礼物分类</span>
          <el-select v-model="gift_edit.cid" placeholder="礼物分类" clearable class="filter-item" filterable
            style="width:300px;max-width:70%;">
            <el-option v-for="item in classType" :key="item.id" :label="item.cat_name" :value="item.id" />
          </el-select>
        </div>

        <div>
          <span>价值</span>
          <div style="width:300px;max-width:70%;display:flex;align-items: center;">
            <el-input v-model="gift_edit.money" placeholder="价值" type="number" />
            <span style="margin-left:10px">钻</span>
          </div>
        </div>

        <div>
          <span>礼物标签</span>
          <el-select v-model="gift_edit.tag_type" placeholder="礼物标签" clearable class="filter-item" filterable
            style="width:300px;max-width:70%;">
            <el-option v-for="item in title_type" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>

        <div>
          <span>排序</span>
          <el-input v-model="gift_edit.sort_order" placeholder="排序" style="width:300px;max-width:70%;" type="number" />
        </div>

        <div>
          <span>动画显示方式</span>
          <div style="width:300px;max-width:70%;display:flex;">
            <el-radio-group v-model="gift_edit.screen_type">
              <el-radio :label="1">全屏</el-radio>
              <el-radio :label="2">半屏</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div>
          <span>是否显示</span>
          <div style="width:300px;max-width:70%;display:flex;">
            <el-radio-group v-model="gift_edit.is_show">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div>
          <el-button class="filter-item" type="primary" style="width:100%;margin:0 auto;margin-top:10px"
            @click="giftAdd">
            保存
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {
    encryption2
  } from "@/api/index";
  export default {
    name: "ComplexTable",
    components: {
      Pagination,
    },
    data() {
      return {
        total: 0, //总数据
        calendarTypeOptions1: [], //下拉数据
        list: [], //起始数据
        time_list: {},
        atlas: {
          cid: '',
          name: '',
          page: 1,
          pageSize: 10,
        }, //搜索信息
        gift_edit: {
          cat_name: "", //礼物类型
          cid: '',
          icon: "", //图标
          icon_full: "",
          // id: 401,
          image_file: "", //动效
          image_gray: "", //大图
          image_gray_full: "",
          is_show: 0, //是否显示
          money: "", //价值
          name: "", //礼物名字
          pag_url: "", //全服礼物
          screen_type: 0, //全屏1  2
          sort_order: 0, //排序
          sub_gift: 0, //自立为1
          tag_name: "", //标
          tag_type: 0, //礼物标签 1 2 3 4 新 限定
        }, //编辑添加信息
        dialogFormVisible1: false,
        srcList: [], //预览大图
        fileList: [], //上传图片
        classType: [],
        title_type: [{
            id: 0,
            name: '无',
          },
          {
            id: 1,
            name: '新',
          },
          {
            id: 2,
            name: '限定',
          },
          {
            id: 3,
            name: '全服',
          },
          {
            id: 4,
            name: '靓号',
          },
        ]
      };
    },
    watch: {
      dialogFormVisible1: {
        handler(newName, oldName) {
          if (!newName) {
            this.gift_edit = {
              cat_name: "", //礼物类型
              cid: '',
              icon: "", //图标
              icon_full: "",
              image_file: "", //动效
              image_gray: "", //大图
              image_gray_full: "",
              money: "", //价值
              name: "", //礼物名字
              pag_url: "", //全服礼物
              screen_type:"",//全屏半屏
              sort_order:"",//排序  
              is_show:2,//是否显示
            };
            this.$refs.upload1.clearFiles();
            this.$refs.upload2.clearFiles();
            this.$refs.upload3.clearFiles();
            this.$refs.upload4.clearFiles();
          }
        },
        deep: true
      }
    },
    created() {
      this.handleFilter();
      this.simpleGiftList(); //搜索礼物列表
      this.carList(); //礼物分类
    },

    methods: {
      simpleGiftList() {
        const arys = {};
        const url = "/gift/simpleGiftList";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.calendarTypeOptions1 = res.data.result;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      carList() {
        const arys = {};
        const url = "/gift/catList";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.classType = res.data.result;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      giftAdd() {
        if (this.gift_edit.id) {
          this.editgift() //编辑
        } else {
          this.addgift() //添加
        }
      },
      // 添加
      addgift() {
        const arys = {
          name: this.gift_edit.name,
          icon: this.gift_edit.icon,
          image_gray: this.gift_edit.image_gray,
          image_file: this.gift_edit.image_file,
          pag_url: this.gift_edit.pag_url,
          cid: this.gift_edit.cid,
          money: this.gift_edit.money,
          tag_type: this.gift_edit.tag_type,
          sort_order: this.gift_edit.sort_order,
          screen_type: this.gift_edit.screen_type,
          is_show: this.gift_edit.is_show,
        };
        const url = "/gift/giftAdd";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter();
            this.$message({
              message: res.data.text,
              type: "success",
            });
            this.dialogFormVisible1 = false;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      // 编辑
      editgift() {
        const arys = {
          id: this.gift_edit.id,
          name: this.gift_edit.name,
          icon: this.gift_edit.icon,
          image_gray: this.gift_edit.image_gray,
          image_file: this.gift_edit.image_file,
          pag_url: this.gift_edit.pag_url,
          cid: this.gift_edit.cid,
          money: this.gift_edit.money,
          tag_type: this.gift_edit.tag_type,
          sort_order: this.gift_edit.sort_order,
          screen_type: this.gift_edit.screen_type,
          is_show: this.gift_edit.is_show,
        };
        const url = "/gift/giftEdit";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter();
            this.$message({
              message: res.data.text,
              type: "success",
            });
            this.dialogFormVisible1 = false;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      handleRemove(file, fileList) {
        this.atlas.pic = '';
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },

      onchange(file, fileList) {
        if (fileList.length > 1) {
          fileList.splice(0, 1);
        }
        // console.log(file, fileList);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      uploadFile1(param) {
        console.log(param);
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          console.log(jsonData);
          if (jsonData.status == 0) {
            that.gift_edit.icon = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.gift_edit.icon_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中
            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
      uploadFile2(param) {
        console.log(param);
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          console.log(jsonData);
          if (jsonData.status == 0) {
            that.gift_edit.image_gray = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.gift_edit.image_gray_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中
            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
      uploadFile3(param) {
        console.log(param);
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          console.log(jsonData);
          if (jsonData.status == 0) {
            that.gift_edit.image_file = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            // that.gift_edit.image_gray_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中
            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
      uploadFile4(param) {
        console.log(param);
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/fileUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("common_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          console.log(jsonData);
          if (jsonData.status == 0) {
            that.gift_edit.pag_url = jsonData.result.url; //取出json中对应需要的数据存入form表单中
            that.gift_edit.pag_url_full = jsonData.result.full_url; //取出json中对应需要的数据存入form表单中
            that.$message({
              message: jsonData.text,
              type: "success",
            });
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
          }
        };
        xhr.send(forms);
      },
      handlePriveImg(row) {
        this.srcList = []
        this.srcList.push(row); //将后端的这一行的数据push进数组中
        this.$refs.myImg.clickHandler();
      },
      // 获取图片遮罩层dom
      handleClickItem() {
        setTimeout(function () {
          let domImageMask = document.querySelector(".el-image-viewer__wrapper");
          if (!domImageMask) {
            return;
          }
          domImageMask.addEventListener("click", (e) => {
            if (e.target.parentNode.className == 'el-image-viewer__actions__inner' || e.target.parentNode
              .className == 'el-image-viewer__btn el-image-viewer__next' || e.target.parentNode.className ==
              'el-image-viewer__btn el-image-viewer__prev') {
              return; //如果点击底部菜单，不关闭
            }
            // 点击遮罩层时调用关闭按钮的 click 事件
            document.querySelector(".el-image-viewer__close").click();
            document.querySelector('body').setAttribute('style', 'overflow:auto;')
          });
        }, 300)
      },

      setUp(row) {
        this.$router.push({
          path: '/gift_list/son_gift',
          name: 'son_gift',
          params: {
            row: row
          }
        })
      },
      // 查询
      handleFilter() {
        const arys = {
          cid: this.atlas.cid,
          name: this.atlas.name,
          page: this.atlas.page,
          pageSize: this.atlas.pageSize,
        };
        const url = "/gift/giftList";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.list = res.data.result.list;
            this.total = res.data.result.total;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
    },
  };
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .el-alert {
    width: 1200px;
  }

  .filter-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
  }

  .batch {
    width: 1200px;
    margin: 10px 0;
    display: flex;
    flex-direction: row-reverse;
  }

  .batch .filter-item {
    margin-left: 20px;
  }

  .el-dialog {
    width: 300px;
    height: 300px;
  }

  .center_lisr {
    width: 96%;
    height: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .flex_de>div {
    display: flex;
    flex-direction: column;
  }

  .center_lisr>div {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .center_lisr>.image_icon {
    height: 60px;
  }

  .center_lisr>div>el-input {
    flex: 1;
    margin-left: 20px;
  }

  .model_ /deep/ .el-dialog__body {
    padding-top: 0%;
  }

  .model_ /deep/ .el-button--mini {
    padding: 10px 20px;
  }

  .model_ /deep/ .el-dialog {
    border-radius: 4px;
  }

  .model_ /deep/ .el-input__inner {
    /* text-align: center; */
  }

  .flex_de /deep/ .el-input__inner {
    padding: 0 4px;
    border: 0;
    background: 00000000;
  }

  .new_row {
    width: 80%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    font-weight: blod;
    font-family: serif;
    cursor: pointer;
  }

  .my-img {
    width: 80px;
    /* height: 80px; */
    padding: 10px;
    margin: 0 auto;
  }

  .image_new_100 {
    max-height: 100px;
    display: flex;
    align-items: center;
  }

  .image_new_100>.span_nth {
    display: flex;
    max-width: 60%;
    max-height: 100px;
    flex-shrink: 0;
  }

  .image_new_100>img {
    width: 50px;
    margin-right: 10px;
  }

  .demo-image__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .model_ /deep/ .el-dialog {
    margin-top: 5vw !important;
  }

  .center_lisr>div {
    /* max-height: 100px; */
    position: relative;
  }

  .model_ /deep/ .el-dialog {
    width: 80%;
  }

  .center_lisr>div>div {
    position: absolute;
    left: 100px;
    margin-right: auto;
  }
</style>